上一章我们认识并且开发了一个简单的渲染引擎。我们了解到渲染引擎主要负责数据可视化中的绘制部分,而接下来的比例尺(Scale),是就负责数据处理部分了。

比例尺是可视化中一个很重要且有用的抽象,主要用于将数据的某一个属性映射为图形的视觉属性,比如名字属性映射图形的颜色属性,身高属性映射为图形的位置属性。
在数据分析模型那一章的最后我们提到,在设计一个可视化方案的时候,其中一个强有力的手段是“编码”,而编码就是通过比例尺完成。不同的数据需要不同的的编码方式,如何根据当前的数据选择合适的比例尺就是我们在可视化中遇见的一个常见的挑战。
同时比例尺也是我们在使用一些图表库中比较难以理解、容易引起困惑的部分,比如有如下常见的问题:
- 为啥最后坐标轴生成的刻度的数量和希望的不一样?
- nice 到底有什么用?
- Threshold, Quantile, Quantile 比例尺有什么区别?
为了帮助大家更好的理解上面的这些问题,同时也为了给 Sparrow 提供数据映射的能力,我们接下来先从比例尺理论讲起,从根本上理解比例尺,然后通过实战加深对其理解,最后通过拓展去了解更多和比例尺相关的东西。
# 比例尺理论
比例尺的概念其实早就藏在我们的日常生活中了,比如我们有度量长度的比例尺:把空间上的一段距离映射为一个数字,有度量重量的比例尺:把一定重量映射为一个数字。
而在可视化中的比例尺,就是用来度量数据属性的,将数据抽象的属性映射为一个视觉属性。这决定了我们如何理解图形的颜色、大小、形状和位置等。选择一个比例尺的时候,需要我们去思考度量的是什么以及这些度量的含义,最终这些选择将决定我们如何理解一个图形。
比如我们希望用点来代表某个数据集中的每一条数据,数据中有 sex 这一个属性,对应有两个值:male 和 female。我们选择用点的颜色去度量 sex 这个数据属性,如果一条数据的 sex 属性是 male 那么对应的点是红色,否者是绿色。所以在理解每一个点的时候,如果这个点是红色,那么它对应的数据的 sex 属性就是 male,否者就是 female。
如果用代码把上面的功能如下描述:
function scale(value) {
return value === 'male' ? 'red': 'green';
}
scale('male'); // 'red'
scale('female'); // 'green'
上面的代码非常的简单,但是通用性太差,只适用于这个特例。有没有什么通用的办法呢?当然是有的。
其实不难发现,比例尺本质上是一个函数,会将一个值(变量)从一个特定的范围(定义域)映射到另一个特定的范围(值域)。定义域(Domain)是由数据的属性决定,值域(Range)是由图形的视觉属性决定。根据定义域和值域的不同,我们需要选择不同的比例尺。
上面的 sex 和 颜色都是分类属性,所以会使用到我们之后要介绍的 Ordinal 比例尺,具体的使用方式如下。
// 根据 options 返回一个函数
const scale = createOrdinal({
domain: ['male', 'female'], // 定义域
range: ['red', 'green'], // 值域
});
scale('male'); // 'red'
scale('female'); // 'green'
那么接下来我们就来看看不同的比例尺,分别了解它们的定义域和值域的类型、映射规则和使用场景。
# Identity
我们首先看一个最简单的比例尺:Ident
